.charge-warp{
	width: 1170px;
	margin: auto;
}
.charge {
	display: flex;
	height: 650px;
	flex-direction: row;
	justify-content: center;
	margin-top: 15px;
	background: #fff;
}
.charge .charge-left {
	height: 100%;
	width: 28%;
	background-color: #FAFAFA;
	position: relative;
}
.charge .charge-left  charge-left-top {
	display: flex;
	flex-direction: column;
}

.charge .charge-left .payment-option {
	display: flex;
	align-items: center;
	height: 97px;
	padding: 0 36px;
	box-sizing: border-box;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.charge .charge-left .payment-option.zfb .icon {
	width: 40px;
	height: 40px;
	background-image: url("../images/zfb.png");
	background-size: cover;
}
.charge .charge-left .payment-option.wx .icon {
	width: 40px;
	height: 40px;
	background-image: url("../images/wxpay.png");
	background-size: cover;
}
.charge .charge-left .payment-option.ptb .icon {
	width: 40px;
	height: 40px;
	background-image: url("../images/money.png");
	background-size: cover;
}

.charge .charge-left .payment-option span {
	height: 20px;
	font-size: 20px;
	margin-left: 28px;
	font-family: PingFang SC;
	font-weight: 300;
	color: #161616;
}

.charge .charge-left .payment-option.active {
	background-color: #FFFFFF;
}
.charge .charge-left .payment-option.active span{
	color: #0082FF;
}
.charge .charge-left .charge-left-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 54px;
	margin-left: 33px;
	border-top: 1px solid #DCDCDC;
	font-weight: 300;
}

.charge .charge-left .charge-left-bottom dl {
	padding: 0;
	width: 100%;
	text-align: left;
}

.charge .charge-left .charge-left-bottom dt {
	margin-bottom: 34px;
	font-size: 20px;
	color: #161616;
}

.charge .charge-left .charge-left-bottom dd {
	margin: 5px 0;
	margin-bottom: 34px;
}

.charge .charge-left .charge-left-bottom dd a {
	text-decoration: none;
	font-size: 18px;
	color: #585858;
}

.charge .charge-left .charge-left-footer {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	position: absolute;
	bottom:30px;
}

.charge .charge-left .charge-left-footer span {
	padding: 0 10px;
	/* 添加左右内边距 */
	color: #161616;
	font-size: 16px;
}

.charge .charge-left .charge-left-bottom span:not(:last-child)::after {
	content: "|";
	/* 竖线内容 */
	padding-left: 10px;
	/* 竖线左边距 */
}


.charge .charge-right {
	width: 72%;
	font-weight: 300;
	font-size: 20px;
	color: #161616;
	padding:0 35px 20px;
}
.charge .charge-right .tab-container{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #707070;
	height: 76px;
}
.charge .charge-right .tab-container .tab{
	flex: 1;
	height: 76px;
	background-color: #ffffff;
	cursor: pointer;
	font-size: 22px;
	font-family: PingFang SC;
	font-weight: 300;
	color: #616161;
	border: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.charge .charge-right .tab-container .active{
	border-bottom: 7px solid #4A92FF;
}
.charge .charge-right .tab-content{
	margin-top: 30px;
}
.charge .charge-right .tab-content .charge-content-item{
	margin-top: 16px;
	margin-bottom: 16px;
	font-size: 18px;
	display: flex;
}
.charge .charge-right .tab-content .charge-content-item .game-search,.charge .charge-right .tab-content .charge-content-item .game_coupon{
	position: relative;
}
.charge .charge-right .tab-content .charge-content-item .dataBox{
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	z-index: 9;
	background: #fff;
}
.charge .charge-right .tab-content .charge-content-item .game-search .search_label{
	background: url(../images/search.png);
	background-size: cover;
	height: 20px;
	width: 20px;
	right: 20px;
	top: 50%;
	margin-top: -10px;
	cursor: pointer;
	position: absolute;
}
.charge .charge-right .tab-content .charge-content-item .select_label{
	cursor: pointer;
	position: absolute;
	display: inline-block;
	width: 0px;
	height: 0px;
	border-width: 6px 6px 0px;
	border-style: solid;
	border-color: rgb(0, 0, 0) transparent transparent;
	right: 30px;
	top: 50%;
	margin-top: 0;
}
.charge .charge-right .tab-content .charge-content-item .game-search .cancel_black{
	right: 25px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	cursor: pointer;
}
.charge .charge-right .tab-content .charge-content-item .cancel_black{
	position: absolute;
	top: 50%;
	right: 50px;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	background-image: url(../images/cancel_black.png);
	background-size: cover;
}
.charge .charge-right .tab-content .charge-content-item .dataBox ul{
	width: auto;
	margin-top: 0;
	box-shadow: 0 1px 8px #9e9e9e;
	padding: 0 10px;
}
.charge .charge-right .tab-content .charge-content-item .dataBox ul li{
	width: 100%;
	text-align: left;
	margin-bottom: 0;
	cursor: pointer;
	font-size: 14px;
	border-bottom: dashed #ddd 1px;
	line-height: 40px;
}
.charge .charge-right .tab-content .charge-content-item .game_coupon .dataBox ul {
	padding: 10px;
}
.charge .charge-right .tab-content .charge-content-item .game_coupon .dataBox li {
	border-bottom: 0;
	background: #fff3f2;
	padding: 5% 5% 2.5%;
	margin-bottom: 10px;
	width: 90%;
	border-radius: 10px;
}
.charge .charge-right .tab-content .charge-content-item .dataBox li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}
.charge .charge-right .tab-content .charge-content-item .search_li_content{
	display: flex;
	justify-content: space-between;
}
.charge .charge-right .tab-content .charge-content-item .search_li_content .search_li_mone{
	font-size: 18px;
	color: red;
	width: 80px;
	padding-right: 10px;
	line-height: 48px;
	text-align: center;
}
.charge .charge-right .tab-content .charge-content-item .search_li_content .search_li_right{
	width: 100%;
	line-height: 24px;
}
.charge .charge-right .tab-content .charge-content-item .search_li_content .search_li_title{
	font-size: 15px;
}
.charge .charge-right .charge-content-item input {
	width: 280px;
	height: 46px;
	background-color: #FFFFFF;
	border: 1px solid #BFBFBF;
	color: #585858;
	padding: 0 10px;
	margin-right: 10px;
	font-size: 16px;
	color: #000;
}

.charge .charge-right select {
	width: 268px;
	height: 46px;
	background-color: #FFFFFF;
	border: 1px solid #C4C4C4;
}
.charge .charge-right .labelName {
	width: 205px;
	height: 48px;
	line-height: 48px;
	display: flex;
}

.charge .charge-right .charge-amount .charge-options{
	flex: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.charge .charge-right .charge-amount .charge-options .charge-button {
	flex: 1 1 calc(33.33% - 10px);
	width: 130px;
	margin-bottom: 10px;
}

.charge .charge-right .charge-amount .charge-options {
	/* display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	width: 100%; */
}
.re_order_wrap,.re_order_qrcode_wrap{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	top: 0;
	left: 0;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;
}
.re_order_wrap .re_order{
	background: #fff;
	padding: 20px 15px;
	font-size: 16px;
	width: 324px;
	border-radius: 15px;
}

.re_order_wrap .re_order .re_order_header{
	color: #c70000;
	font-size: 20px;
	line-height: 30px;
	position: relative;
}
.re_order_wrap .re_order .re_order_back{
	position: absolute;
	top: 0;
	right: 10px;
	width: 20px;
	height: 20px;
	background: url(../images/cancel_order.png);
	background-size: cover;
	cursor: pointer;
}
.re_order_wrap .re_order .re_order_item{
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
}
.re_order_wrap .re_order .re_order_item label{
	width: 40%;
	text-align: right;
}
.re_order_wrap .re_order .re_order_item input{
	border: 0;
}
.re_order_wrap .re_order .re_order_submit{
	margin-top: 30px;
	margin-bottom: 0;
}
.re_order_wrap .re_order .re_order_item .pay_submit{
	background: #3386ee;
	height: 38px;
	width: 50%;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}
.re_order_qrcode_wrap .re_order_qrcode{
	text-align: center;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_qrcode_image .re_order_qrcode_image_title{
	color: #fff;
	font-size: 16px;
	text-align: center;
	margin-bottom: 10px;
	height: 20px;
}
.re_order_qrcode_wrap .re_order_notice{
	color: #fff;
	font-size: 15px;
	width: 320px;
}
.re_order_qrcode_wrap .re_order_notice_title{
	font-size: 18px;
	margin-bottom: 20px;
}
.re_order_qrcode_wrap .re_order_notice_content{
	margin-bottom: 60px;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_qrcode_image{
	width: 260px;
	padding: 0 30px;
	margin-bottom: 30px;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_qrcode_image img{
	width: 100%;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_button{
	display: flex;
	justify-content: space-between;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_notify{
	margin: 0;
	width: 120px;
	border: 0;
	height: 45px;
	line-height: 45px;
	border-radius: 5px;
	font-size: 15px;
	background: #3386ee;
	color: #fff;
	cursor: pointer;
}
.re_order_qrcode_wrap .re_order_qrcode .re_order_back{
	margin: 0;
	width: 120px;
	border: 0;
	height: 45px;
	line-height: 45px;
	border-radius: 5px;
	font-size: 15px;
	background: #fff;
	color: #000;
	cursor: pointer;
}
.charge .charge-right .charge-amount .charge-options .btnBox{
}
	.charge .charge-right .charge-amount .charge-options .charge-button {
		float: left;
		width: 80px;
		background-color: #FFFFFF;
		color: #242424;
		padding: 10px 15px;
		border: #C4C4C4 solid 1px;
		cursor: pointer;
		font-size: 16px;
		text-align: center;
		margin-right: 15px;
	}
	.charge .charge-right .charge-amount .charge-options .charge-button input{
		display: none;
	}
	.charge .charge-right .charge-amount .charge-options .charge-button:hover {
		border: #3486EF solid 1px;
	}
	/* 输入自定义金额 */
	.charge .charge-right .charge-amount .charge-options  #customAmount {
		width: 248px;
		height: 46px;
		background-color: #FFFFFF;
		border: 1px solid #C4C4C4;
		color: #585858;
		padding: 0 10px;
	}

	.charge .charge-right .submit {
		width: 200px;
		height: 60px;
		background-color: #3486EF;
		color: #FFFFFF;
		padding: 10px 20px;
		border: 0;
		cursor: pointer;
		font-size: 20px;
		text-align: center;
	}
	.customer-service-warp{
		height: 900px;
		background:url("../images/cs.png") #D6E3F4 no-repeat;
		background-position:85% 0 ;
		position: relative;
	}
	.customer-service {
	    width: 1170px;
		margin: auto;
	}
	.customer-service .customer-service-hader {
		padding-top: 100px;
		padding-left: 30px;
	}
	.customer-service .customer-service-hader .customer-service-hader-title {
	        font-size: 30px;
	        color: #0D0D0D;
	    }
	.customer-service .customer-service-hader .customer-service-hader-time {
			font-size: 22px;
			font-weight: 300;
			color: #4A92FF;
		margin-top: 10px;
		}
.customer-service .customer-service-hader .customer-service-hader-btn{
	display: flex;
	margin-top: 35px;
}
	.customer-service .customer-service-hader  .customer-service-hader-btn1 {
		width: 220px;
		height: 60px;
		font-size: 24px;
		font-weight: 300;
		color: white;
		border: none;
		background-color: #4A92FF;
		border-radius: 14px;
		display: flex;
		align-items: center;
		padding-left: 32px;
		margin-right: 30px;
		cursor: pointer;
	}
	.customer-service .customer-service-hader  .customer-service-hader-btn1  .icon {
		width: 40px;
		height: 40px;
		margin-left: 18px;
		background: url("../images/wx.png");
		background-size: cover;
	}
	
	
	.customer-service .customer-service-hader  .customer-service-hader-btn2 {
	    width: 220px;
	    height: 60px;
	    font-size: 24px;
	    font-family: PingFang SC-Medium;
	    font-weight: 300;
	    color: #4A92FF;
	    border: none;
	    background-color: white;
	    border-radius: 14px;
	    display: flex;
	    align-items: center;
	    padding-left: 32px;
		cursor: pointer;
	}
	.customer-service .customer-service-hader  .customer-service-hader-btn2 .icon {
		width: 40px;
		height: 40px;
		margin-left: 18px;
		background: url("../images/em.png");
		background-size: cover;
	}
	
	.customer-service .customer-service-hader  .btn2  .img {
		width: 539px;
		height: 366px;
		position: absolute;
		top: 13px;
		right: 267px;
		margin: 0;
	}
	
	
	.customer-service .customer-service-body {
		margin-top: 60px;
	    height: 508px;
	    background-color: #ffffff;
	    overflow: hidden;
	    border-radius: 28px;
	    display: flex;
	    flex-direction: column;
	}
	.customer-service .customer-service-body .tab-container {
	        display: flex;
	        /* 设置为 Flexbox */
	        justify-content: space-between;
	        /* 标签水平均匀分布 */
	        border-bottom: 1px solid #707070;
	        height: 76px;
	        /* 标签的高度 */
	        margin: 0 57px;
	        /* 去掉默认边距 */
	    }
	
	.customer-service .customer-service-body .tab {
	    flex: 1;
	    height: 76px;
	    background-color: #ffffff;
	    cursor: pointer;
	    font-size: 20px;
	    font-family: PingFang SC;
	    font-weight: 300;
	    color: #616161;
	    border: none;
	    margin: 0;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    position: relative;
	}
	
	.customer-service .customer-service-body .active {
	            border-bottom: 7px solid #4A92FF;
	        }
	
	.customer-service .customer-service-body  .tab-content {
			display: none;
			padding: 16px 0;
			background-color: #ffffff;
			font-size: 18px;
			margin: 0 57px;
			color: #616161;
		}
	.customer-toggle-weixin-wrap,.customer-toggle-question-wrap{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.8);
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.customer-toggle-weixin{
	position: relative;
}
.customer-toggle-weixin .customer-toggle-weixin-title{
	color: #fff;
	font-size: 18px;
	text-align: center;
	margin-bottom: 25px;
	height: 20px;
}
.customer-toggle-weixin .customer-toggle-weixin-image{
	width: 260px;
	padding: 0 30px;
	margin-bottom: 30px;
}
.customer-toggle-weixin img{
	width: 100%;
}
.customer-toggle-weixin-cancel{
	cursor: pointer;
	position: absolute;
	margin-top: 20px;
	margin-left: -15px;
	left: 50%;
	width: 30px;
	height: 30px;
	background-image: url(../images/cancel.png);
	background-size: cover;
}
.customer-toggle-question{
	width: 324px;
	padding: 20px 15px;
	background: #fff;
	border-radius: 15px;
	font-size: 15px;
	position: relative;
}
.customer-toggle-question .question-back{
	position: absolute;
	top: 0;
	right: 10px;
	width: 20px;
	height: 20px;
	background: url(../images/cancel_order.png);
	background-size: cover;
	cursor: pointer;
}
.customer-toggle-question .question-header{
	color: #c70000;
	font-size: 20px;
	line-height: 30px;
	position: relative;
	text-align: center;
}
.customer-toggle-question .question-item-header{
	width: 100px;
	font-size: 18px;
	line-height: 30px;
}
.customer-toggle-question .question-item .question-type-ul{
	line-height: 36px;
	text-align: center;
	margin: 5px 0;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.customer-toggle-question .question-item .question-type-ul li{
	width: 33.3%;
	border-radius: 30px;
	cursor: pointer;

}
.customer-toggle-question .question-item ul li.active{
	background: #4A92FF;
	color: #fff;
}
.customer-toggle-question .question-game .question-item-header{
	line-height: 40px;
}
.customer-toggle-question .game-search{
	height: 40px;
	line-height: 40px;
	width: 100%;
	padding-left: 10px;
	position: relative;
}
.customer-toggle-question .game-search input{
	height: 100%;
	width: 100%;
	text-indent: 10px;
	border: 1px solid #BFBFBF;
	border-radius: 5px;
}
.customer-toggle-question .game-search .search_label{
	background: url(../images/search.png);
	background-size: cover;
	height: 20px;
	width: 20px;
	right: 8px;
	top: 50%;
	margin-top: -10px;
	cursor: pointer;
	position: absolute;
}
.customer-toggle-question .game-search .cancel_black{
	position: absolute;
	top: 50%;
	right: 8px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	cursor: pointer;
	background-image: url(../images/cancel_black.png);
	background-size: cover;
}
.customer-toggle-question .game-search .dataBox{
	position: absolute;
	top: 42px;
	left: 0;
	width: 100%;
	z-index: 9;
	background: #fff;
}
.customer-toggle-question .game-search .dataBox ul{
	width: auto;
	margin-top: 0;
	box-shadow: 0 1px 8px #9e9e9e;
	padding: 0 10px;
}
.customer-toggle-question .game-search .dataBox ul li{
	width: 100%;
	text-align: left;
	margin-bottom: 0;
	cursor: pointer;
	font-size: 14px;
	border-bottom: dashed #ddd 1px;
	line-height: 40px;
}
.question-item{
	margin-bottom: 10px;
}
.question-item .question-content{
	padding: 10px;
	background: #fafafa;
}
.question-item .question-content textarea{
	width: 100%;
	background: none;
	min-height: 60px;
	font-size: 15px;
	resize: vertical;
}
.question-item .question-submit{
	height: 36px;
	line-height: 36px;
	width: 100%;
	background: #4A92FF;
	color: #fff;
	border-radius: 30px;
	cursor: pointer;
}
.record .record-top{
	margin-top: 15px;
	margin-left: 36px;
}
.record .record-down{
	margin-top: 15px;
	margin-left: 36px;
}
.record	.record-title {
	line-height: 28px;
	font-weight: 300;
	font-size: 20px;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-bottom: 15px;
}
		
		.table-container {
		    width: 100%;
		    overflow-x: auto;
		}

		.iform_table table {
		    width: 661px;
		    border-collapse: collapse;
		    font-family: PingFang SC;
		    font-weight: 300;
		    font-size: 16px;
		    color: #656565;
		}
		
		th,td {
		    border: none;
		    padding: 8px;
		    text-align: center;
		}
		
		th {
		    height: 56px;
		    background-color: #0082FF;
		    color: #FFFFFF;
		    font-family: PingFang SC;
		    font-weight: 300;
		    font-size: 16px;
		}
.record {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 15px;
}
.record .charge-left {
	height: 100%;
	width: 28%;
	background-color: #FAFAFA;
	position: relative;
}
.record .charge-left .left-top {
	width: 100%;
	height: 182px;
	display: flex;
}
.record .charge-left .left-top .pic {
	width: 77px;
	height: 77px;
	border-radius: 50%;
	margin-top: 64px;
	margin-left: 56px;
	position: absolute;
	overflow: hidden;
}
.record .charge-left .left-top .pic img{
	width: 100%;
}
.record .charge-left .left-top .xx {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin-top: 71px;
	margin-left: 159px;
}
.record .charge-left .left-top .xx .name {
	width: 100%;
	font-size: 18px;
	margin-bottom: 10px;
}

.record .charge-left .left-top .xx .id {
	width: 100%;
	font-size: 15px;
	color: #9e9e9e;
}

.record .charge-left .left-body  .left-body-account {
	width: 309px;
	height: 100px;
	background-color: #FAFAFA;
	display: flex;
}

.record .charge-left .left-body .left-body-account span {
	height: 28px;
	font-size: 20px;
	font-weight: 300;
	color: #000000;
	margin-top: 36px;
	margin-left: 105px;
}

.record .charge-left .left-body .left-body-account.active {
	background-color: #0082FF;
}
.record .charge-left .left-body .left-body-account.active span {
	color: #FFFFFF;
}

.record .charge-right {
	width: 72%;
	font-weight: 300;
	font-size: 20px;
	color: #161616;
	padding: 0 35px;
}
.record .charge-right .right-heard {
	width: 148px;
	height: 22px;
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 16px;
	color: #656565;
	margin-top: 19px;
	margin-left: 36px;
}
.record .charge-right .right-heard span {
	color: #FF6238;
}

.record .charge-right .right-top {
	width: 100%;
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 20px;
	color: #000000;
	margin-left: 36px;
}
.record .charge-right .right-top .top-one {
	width: 100px;
	height: 28px;
	margin-bottom: 23px;
}

.record .charge-right .right-top .top-two {
	width: 100%;
	height: 100%;
}

.record .charge-right .right-top .top-two .money {
	width: 66px;
	height: 45px;
	color: #FF6238;
	font-size: 32px;
	font-weight: 400;
	margin-right: 26px;
}

.record .charge-right .right-top .top-two  button {
	width: 120px;
	height: 49px;
	background: #FF6238;
	color: #FFFFFF;
	margin-left: 26px;
	border: none;
	cursor: pointer;
}

.record .charge-right .right-top .top-two .top-three {
	width: 100px;
	height: 28px;
	margin-top: 35px;
}

.record .charge-right .right-bottom table{
	width: 661px;
	border-collapse: collapse;
	margin: 20px 0;
	font-family: PingFang SC;
	font-weight: 300;
	font-size: 16px;
	color: #656565;
}

th,td {
	border: none;
	padding: 8px;
	text-align: center;
}
.iform_table
.record .charge-right  .right-bottom th,.iform_table th {
	height: 40px;
	line-height: 40px;
	background-color: #0082FF;
	color: #FFFFFF;
	font-weight: 300;
	font-size: 16px;
}